
// 点击li切换到对应的内容
window.onload = function () {
    //首先要获取到li标签，
        //先获取到父类标签
    var nav = document.getElementById("nav");
    var liArr = nav.getElementsByTagName("li");

    var text = document.getElementById("text");
    var pArr = text.getElementsByTagName("p");

    //为每一个li绑定事件
    for(var i=0;i<liArr.length;i++){
        //为每个li设置自定义属性，值为当前li的索引
        liArr[i].setAttribute("a",i);
        // liArr[i].a = i;这样的设置属性也可以使用

        //给li注册事件(注意这里数组不能直接使用)
        liArr[i].onmouseover = function () {
            // 这里的索引i不能直接使用，所以要设置属性，为了绑定每个li和p
            var index = this.getAttribute("a");
            // var b = this.a;对应于上面的直接设置属性的方法，要用这种方法来获取属性
            //先清除所有的激活样式
            for(var j=0;j<liArr.length;j++){
                liArr[j].className = "";
                pArr[j].className = "";
            }
            //再为当前点击的li设置为激活状态
            this.className = "active";
            // liArr[i].className = "active";这样就是错的
            //显示li对应的段落
            pArr[index].className = "active";

        }
    }

}